<template>
    <div class="upLoadPicture">
        <div class="title">登录页背景图片上传
        	<span ><i class="el-icon-info"></i> 背景图片尺寸1920*1080px</span>
        </div>
        <br />
        <img-upload limit="3" :imgList.sync="imgArr"></img-upload>
        <br /><br />
        <div class="button_bn">
        	<el-button type="primary" size="small" @click="submit">设置图片</el-button>
        </div>
    </div>
</template>

<script>
    import imgUpload from './imgUpload'
    export default {
        components: {
            imgUpload
        },
        data() {
            return {
                imgArr: [], 
            };
        },
        methods: {
            submit() {
                let checkedVal = [];
                for(let i = 0;i < this.imgArr.length;i++){
                    if(this.imgArr[i].check) checkedVal.push(this.imgArr[i]);
                }
                if(checkedVal.length){
                    this.$message.success('上传成功！');
                }else{
                    this.$message.error('最少要选择一张图片！');
                }
            },
        },
    }
</script>

<style scoped lang="scss">
    .upLoadPicture {
        padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;height: 100%;
        .title {
            font-size: 14px;
            margin: 10px 0;
	    	span {
	    		margin-left: 20px;
	    		color: #F56C6C;
	    		font-size: 13px;
	    		i{
	    			color: #F56C6C
	    		}
	    	}
        }
    }
</style>